import React,{ Component,useState } from 'react'
import {
    Button,
    Row,
    Col,
    Spin,
    Icon,
    Card,
    Tabs,
    Input,
    InputNumber,
    Collapse,
    message,
    Modal,
    Dropdown,
    Menu,
} from 'antd';
import { runInAction } from 'mobx'

import FormBasePropertyConfig,{ IHLFormUtils } from '../property.config/formBasePropertyConfig';
import { HlLabeledValue } from 'legions-lunar/model';
import { PropertyFormElementFormFieldsRule } from '../../models/form/propertyFormElement';
import FormProerty from '../../containers/components.property/formProperty';
import { INPUT_ADDON_AFTER_BUTTON } from '../../constants/code/formConfigCode';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
import { LegionsProForm } from 'legions-pro-design';
const { Panel } = Collapse;
interface IProps { }
interface IState { }
@fullProvider(FormPropertyInputConfig)
export default class FormPropertyInputConfig {
    @lazyInject(FormBasePropertyConfig)
    public formBasePropertyConfig!: FormBasePropertyConfig
    createInputElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: { instance: FormProerty }) {
        const formPropertyApp = options.instance.props.store.context.formPropertyApp;
        const rules = this.formBasePropertyConfig.createRulesInstance<PropertyFormElementFormFieldsRule>(PropertyFormElementFormFieldsRule);
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'maxLength',
            placeholder: '字符最大长度',
            label: '最大长度',
            rules: rules.maxLength
        })
        this.formBasePropertyConfig.renderRadioButtonConfig(formUtils,{
            name: 'inputType',
            label: '输入框类型',
            rules: rules.inputType,
            options: [{
                label: '数字',
                value: 'number',
            },{
                label: '文本',
                value: 'text',
            },{
                label: '多行文本',
                value: 'textarea',
            }]
        })
        formUtils.renderSelectConfig({
            iAntdProps: formUtils.createAntdProps('inputAddonAfter',null,'请选择框后缀'),
            iFormProps: {
                ...formUtils.createLayout('文本框后缀',this.formBasePropertyConfig.span.labelSpan,this.formBasePropertyConfig.span.wrapSpan),
                options: [{ key: '1',value: '按钮(button)',label: '按钮(button)' },{ key: '2',value: '下拉框(select)',label: '下拉框(select)',disabled: true }],
                labelInValue: true,
                onChange: (value: HlLabeledValue) => {
                    const property = 'inputAddonAfter';
                    runInAction(() => {
                        formPropertyApp.propertyFormationVM.editComponentData.property = property
                    })
                    const updateData = (options: { propertyType: 'expression' | 'function' | null; title: string; code: string }) => {
                        formPropertyApp.propertyFormationVM.dispatchAction(() => {
                            formPropertyApp.formPropertyCodeEditModalRef.viewModel.visible = true;
                            formPropertyApp.formPropertyCodeEditModalRef.viewModel.title = options.title;
                            const item = formPropertyApp.propertyFormationVM.getPropertyValueTemp(property,options.propertyType)
                            if (!item || item.value === '') {
                                formPropertyApp.propertyFormationVM.updatePropertyValueTemp({
                                    value: options.code,
                                    property: property,
                                    propertyType: options.propertyType,
                                })
                            }
                        })
                    }
                    if (value && value.key === '1') {
                        updateData({ propertyType: 'expression',title: '添加文本框后缀表达式',code: INPUT_ADDON_AFTER_BUTTON })
                    }
                }
            },
            rules: rules.inputAddonAfter,
        })
        return [
            formUtils.getFormConfig('maxLength'),
            formUtils.getFormConfig('inputType'),
            formUtils.getFormConfig('inputAddonAfter'),
        ]
    }
}